<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/StoresSystem' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/StoresSystem/FinishedGoods' }">库存商品</el-breadcrumb-item>
      <el-breadcrumb-item>新增库存</el-breadcrumb-item>
      <!-- <el-breadcrumb-item :to="{ path: '/StoresSystem/' }">上架商品</el-breadcrumb-item> -->
    </el-breadcrumb>

    <el-form
      :model="Goodsadd"
      label-width="100px"
      class="demo-Goodsadd"
      ref="Goodsadd"
      style="width: 30%; margin:0 auto"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="Goodsadd.name" size="200px"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="Goodsadd.price"></el-input>
      </el-form-item>
      <el-form-item label="商品数量" prop="num">
        <el-input v-model="Goodsadd.num"></el-input>
      </el-form-item>
      <!-- <el-form-item label="商品门店" prop="shopsId">
        <el-input v-model="Goodsadd.shopsId"></el-input>
      </el-form-item> -->
      <el-form-item label="是否上架" prop="state">
        <el-radio-group v-model="Goodsadd.state">
          <el-radio v-model="Goodsadd.state" label="已上架" value="unsold"></el-radio>
          <el-radio v-model="Goodsadd.state" label="未上架" value="sell"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品门店" prop="shopsId">
        <el-select v-model="Goodsadd.shopsId" placeholder="选择门店">
          <el-option
            v-for="item in Goodsadd"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click.prevent="addGoods(Goodsadd)">立即创建</el-button>
        <el-button @click="resetForm('Goodsadd')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState: mapState, mapActions: mapActions } = createNamespacedHelpers(
  "addgoods"
);
export default {
  data() {
    return {
      Goodsadd: {
        name: "",
        price: "",
        num: "",
        state: "",
        shopsId: ""
      }
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapActions(["addGoods"])
  },
  computed: {
    ...mapState(["studentsData"])
  },
  watch: {
    student(newValue) {
      this.student = newValue;
    }
  }
};
</script>

<style>
.el-breadcrumb {
  padding-left: 25px;
  height: 30px;
}
</style>